$(document).ready(function () {


    layui.use(function () {

        var layer = layui.layer;

        // 表格
        form = layui.form;
        layui.laydate.render({
            elem: "#input-date",
            range: true,
        });

        form.on('submit(search)', function (data) {//监听查询提交
            params = data.field;
            if (data.field.date != '') {
                params.beginTime = data.field.date.split(' - ')[0]
                params.endTime = data.field.date.split(' - ')[1]
            } else {
                params.beginTime = ''
                params.endTime = ''
            }

            params.pageSize = 10;
            queryTable()
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        initSubMenu();
        queryTable();


    });
})
var params = {};//查询条件参数
var form, unit;
var drawer;//抽屉实例
var curType = 1;//当前选中考核标准ID




// 顶部菜单切换
$('.contain-tab-item').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');
    curType = $(e.currentTarget).data().type;

    if (curType == 0) {

        $('.tab1').hide()
        $('.tab2').show()
        initChart()

    } else {
        queryTable()
        $('.tab2').hide()
        $('.tab1').show()
    }
})


//查询考核标准类型列表
queryTable = () => {

    layui.use('table', function () {
        var table = layui.table;

        params.status = curType

        //展示已知数据
        table.render({
            elem: '#table'
            , text: {
                none: '暂无数据'
            }
            , method: 'get'
            , url: ajaxPrefix() + "/train/task/list"
            , headers: {
                SessionId: JSON.parse(localStorage.getItem('sessionId'))
            }
            , where: params
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status == 200 ? 0 : 1, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.result.total, //解析数据长度
                    "data": res.result.data //解析数据列表
                };
            }
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , cols: [[
                {
                    field: 'statusDesc', title: '任务状态', align: "center", templet: function (d) {

                        if (d.status === 1) {

                            return `<span style="color: #ffe933">${d.statusDesc}</span>`;

                        } else
                            if (d.status === 2) {

                                return `<span style="color: #2bffba">${d.statusDesc}</span>`;

                            } else
                                if (d.status === 3) {

                                    return `<span style="color: #ff9759">${d.statusDesc}</span>`;

                                }

                    }
                },
                { field: 'projectName', title: '项目名称', align: "center" },
                { field: 'personName', title: '训练人', align: "center" },
                { field: 'planTrainNum', title: '计划训练次数', align: "center" },
                { field: 'realTrainNum', title: '实际训练次数', align: "center" },
                { field: 'limitTime', title: '完成时间', align: "center", hide: curType != 2 },
                { field: 'limitTime', title: '截止时间', align: "center", hide: curType == 2 },
            ]]
            , height: 'full'
            // ,skin: 'line' //表格风格
            , even: true
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 3 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }
            , done: function (res, curr, count) {

                $('.layui-table-cell').height($('.contain-table-list').height() / 20);
            },

        });

    });
}


function initChart() {
    drawBar()
    queryCount()
    drawLine()
    queryList()
}


function drawBar() {

    new AjaxChain()
        .setUrl('/train/task/status/time/count?type=6')
        .then(data => {

            var xData = [], yData = [], yData1 = []

            $.each(data, function (key, value) {
                xData.push(value.date)
                yData.push(value.overtime)
            })


            var myChart = echarts.init(document.getElementById('bottom-chart'));

            var option = {
                color: ['#B67E2C'],
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        data: yData,
                        type: 'bar',
                        'barMaxWidth': 20,
                        'itemStyle': {
                            'color': new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                { offset: 1, color: '#F3F2B5' },
                                { offset: 0, color: '#B67E2C' }
                            ]),
                            barBorderRadius: [10, 10, 0, 0]
                        },
                    }
                ]
            };


            myChart.setOption(option);


        })
        .send();



}

function drawLine() {

    new AjaxChain()
        .setUrl('/train/task/status/time/count?type=6')
        .then(data => {

            var xData = [], yData = [], yData1 = []

            $.each(data, function (key, value) {
                xData.push(value.date)
                yData.push(value.done)
            })


            var myChart = echarts.init(document.getElementById('left-chart'));

            var option = {
                color: ['#80A0FF'],
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        data: yData,
                        type: 'line',
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'hsla(236, 84.70%, 61.60%, 0.70)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(79,166,255, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                    }
                ]
            };


            myChart.setOption(option);


        })
        .send();



}

function queryCount() {


    new AjaxChain()
        .setUrl('/train/task/status/count')
        .then(data => {
            if (!data) {
                data = {
                    "todo": "-",
                    "done": "-",
                    "overtime": "-",
                }
            }

            $('.left-number').empty().append(
                `<div class="number-item">
                        <span>${data.todo}</span>
                        <div>待训练</div>
                    </div>
                    <div class="number-item">
                        <span>${data.done}</span>
                        <div>已训练</div>
                    </div>
                    <div class="number-item">
                        <span>${data.overtime}</span>
                        <div>超时</div>
                </div>`
            )

        })
        .send();

}





function queryList() {
    new AjaxChain()
        .setUrl('/train/task/status/person/count?type=6&status=2')
        .then(data => {
            data = data.slice(0, 5);

            $('#already-list')
                .empty()
                .append(
                    data.reduce((x, y) => {
                        return x + `<li class="rank-list">
                                    <img src="${y.photoPath ? ('/images/' + y.photoPath) : '../static/img/photo.png'}">
                                    <div>${y.personName}</div>
                                    <div>${y.taskNum}</div>
                                </li>`

                    }, '')
                )

        })
        .send();


    new AjaxChain()
        .setUrl('/train/task/status/person/count?type=6&status=3')
        .then(data => {
            data = data.slice(0, 5);

            $('#overtime-list')
                .empty()
                .append(
                    data.reduce((x, y) => {
                        return x + `<li class="rank-list">
                                    <img src="${y.photoPath ? ('/images/' + y.photoPath) : '../static/img/photo.png'}">
                                    <div>${y.personName}</div>
                                    <div>${y.taskNum}</div>
                                </li>`

                    }, '')
                )

        })
        .send();
}

